page-activit-detail {
    $img-proportion: 750/283;

    @function computed-vw($px) {
        @return $px/1080*100vw;
    }
    ion-header {
        .ios-end {
            align-self: flex-end;
        }
        .detailHead {
            .segment-ios {
                padding: 0 15vw;
                top: 0.6vw;
                .segment-activated {
                    color: #ffca37;
                    background-color: transparent !important;
                }
            }
            .segment-button {
                border: 0;
                color: #fff;
                font-size: computed-vw(54);
            }
        }
        .single {
            .segment-ios {
                .segment-activated {
                    color: #fff;
                }
            }
        }
    }
    ion-content {
        .segmentAct {
            width: 100%;
            height: 100%;
            & > div {
                height: 100%;
                overflow: hidden;
            }
            .segDetail {
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                background-color: #fff;
            }
            roster-list {
                height: 100%;
                overflow: hidden;
            }
            &[ng-reflect-ng-switch='joinCust'] {
                background-color: #f3f3f3;
                overflow: hidden;
                height: 100%;
            }
            .roster-component-scroll {
                -webkit-overflow-scrolling: touch;
                overflow: auto;
                height: 100%;
            }
            .segDetail {
                p {
                    margin: 0;
                }
                .detailName {
                    font-size: computed-vw(54);
                    padding-left: 5.55vw;
                    //  border-bottom: 0.2vw solid #e9e9e9;
                    margin-bottom: computed-vw(30);
                    color: #333;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    span:first-child {
                        line-height: 1.4;
                    }
                }
                .detailType {
                    margin-left: 5.55vw;
                    margin-bottom: computed-vw(60);
                    display: inline-block;
                    font-size: computed-vw(36);
                    color: #35AC63;
                    height: computed-vw(60);
                    line-height: computed-vw(60);
                    border-radius: computed-vw(30);
                    border: computed-vw(2) solid #35AC63;
                    padding: 0 computed-vw(15);
                }
                .img-wrapper {
                    position: relative;
                }
                .bannerImg {
                    margin-bottom: 5.27vw;
                    width: 100%;
                    height: 100vw/$img-proportion;
                    &[src="null"], &:not([src]) {
                        opacity: 0;
                    }
                }
                .actState {
                    width: computed-vw(153);
                    height: computed-vw(59);
                    color: #fff;
                    border-radius: computed-vw(153/2);
                    background: #ffc937;
                    text-align: center;
                    line-height: computed-vw(59);
                    font-size: computed-vw(36);
                    margin-right: computed-vw(60);
                }
                .actState1 {
                    background: #2bb565;
                }
                .actState2 {
                    background: #005d98;
                }
                .actState3 {
                    background: #e04343;
                }
                .commP {
                    font-size: computed-vw(54);
                    color: #1e2039;
                    padding-top: computed-vw(60);
                    position: relative;
                    overflow: hidden;
                    margin-left: 5.55vw;
                    padding-left: computed-vw(30);
                    &:before {
                        content: " ";
                        position: absolute;
                        left: 0;
                        top: computed-vw(64);
                        width: computed-vw(10);
                        height: computed-vw(58);
                        background-color: #35AC63;
                    }
                }
                .bordered {
                    position: relative;
                    &:after {
                        content: " ";
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 5.55vw;
                        border-top: 1px solid #e9e8e8;
                        transform: scaleY(.5);
                    }
                }
                .actTime {
                    margin-left: 5.55vw;
                    margin-top: computed-vw(45);
                    font-size: computed-vw(42);
                    color: #999999;
                    //  border-bottom: 0.2vw solid #e9e9e9;
                    padding-bottom: computed-vw(60);
                }
                .actIntro {
                    padding: computed-vw(45) 0;
                    //  border-bottom: 0.2vw solid #e9e9e9;
                    margin: 0 5.55vw;
                    font-size: 3.89vw;
                    color: #333;
                    p {
                        //text-indent:2em;
                        margin-bottom: 3.7vw;
                    }
                }
                .commDiv {
                    // border-bottom: 0.2vw solid #e9e9e9;
                    padding-bottom: 2vw;
                    p {
                        margin-bottom: 2.77vw;
                        span {
                            color: #35AC63;
                            font-size: computed-vw(42);
                        }
                    }
                    .commActCont {
                        font-size: 3.33vw;
                        color: #939598;
                        position: relative;
                        height: auto;
                        margin-left: 5.55vw;
                        a {
                            position: absolute;
                            right: 5.55vw;
                            display: inline-block;
                            height: 5vw;
                            width: 5vw;
                            top: 50%;
                            margin-top: -2.5vw;
                        }
                        .downLoad {
                            display: inline-block;
                            height: 5vw;
                            width: 5vw;
                            background: url('../assets/images/common/icon_download.png') no-repeat;
                            background-size: cover;
                        }
                    }
                }
            }
        }
    }
    .scroll-content {
        -webkit-overflow-scrolling: auto;
    }
    .activity-share-wrapper {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .inner {
            width: 100%;
            height: 100%;
            overflow: hidden;

            .activity-share-iframe {
                width: 100%;
                height: 100%;
                -webkit-overflow-scrolling: touch;
                overflow-y: auto;
            }

        }
        img {
            display: block;
            margin: 0 auto;
        }
    }

    button.share {
        background: transparent url(../assets/images/activity/activity-details/share_68.png) no-repeat;
        background-size: cover;
        padding: 0;
        box-shadow: 0 0 5vw 0.1vw #ddd;
        width: 15vw;
        height: 15vw;
        top: 3vw;
        right: 3vw;
        border-radius: 50%;
        ion-icon {
            visibility: hidden;
        }
        &.activated {
            background-color: transparent;
        }
        visibility: hidden;
        &.show {
            visibility: visible;
        }
    }

    .share-menu {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        visibility: hidden;

        .tools {
            width: 100vw;
            height: 33.24vw;
            background-color: #fff;
            position: absolute;
            bottom: -33.24vw;
            transition: 0.2s transform;
            display: flex;
            & > div {
                width: 50%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 3.89vw;
                .icon {
                    width: 10.185vw;
                    height: 10.185vw;
                    border-radius: 50%;
                    background-repeat: no-repeat;
                    background-size: cover;
                }
                .inner {
                    background: none;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    height: 16vw;
                    width: 100%;
                }

                &.share-friend {
                    .icon {
                        background-image: url(../assets/images/activity/activity-details/wechat.png)
                    }
                }
                &.share-moment {
                    .icon {
                        background-image: url(../assets/images/activity/activity-details/pyq.png)
                    }
                    .inner {
                        border-left: 1px solid #e9e9e9;
                    }
                }
            }
        }

        &.is-show {
            visibility: visible;
            .tools {
                transform: translate3d(0, -33.24vw, 0);
            }
        }
    }

}
